<template>
  <div>
    <el-table
      height="320"
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="address" label="关键词" :formatter="formatter">
      </el-table-column>
      <el-table-column prop="date" label="人数" sortable width="80">
      </el-table-column>
      <el-table-column prop="name" label="周增长率" sortable width="100">
      </el-table-column>
    </el-table>
    <!-- -----------------------分页------------------------ -->
    <div class="pagePp">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="200"
        :pager-count="7"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tablez",
  data() {
    return {
      tableData: [
        {
          date: "799",
          name: "58%",
          address: "搜索关键词-1",
        },
        {
          date: "749",
          name: "50%",
          address: "搜索关键词-2",
        },
        {
          date: "635",
          name: "89%",
          address: "搜索关键词-3",
        },
        {
          date: "547",
          name: "43%",
          address: "搜索关键词-4",
        },
        {
          date: "799",
          name: "58%",
          address: "搜索关键词-1",
        },
        {
          date: "749",
          name: "50%",
          address: "搜索关键词-2",
        },
        {
          date: "635",
          name: "89%",
          address: "搜索关键词-3",
        },
        {
          date: "547",
          name: "43%",
          address: "搜索关键词-4",
        },
      ],
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
  },
};
</script>
<style lang="scss" scoped>
.pagePp {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
</style>